<script setup>

import { ref } from "vue";

// 表格数据
const tableData = ref([{}])


// 分页条数据模型
const pageNum = ref(1)// 当前页
const total = ref(20)// 总条数
const pageSize = ref(10)// 每页条数
// 当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  // 刷新页面
  getRoommate()
}
// 当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  // 刷新页面
  getRoommate()
}

// 搜索数据模型
const search = ref({})

import { getRoommateListService } from '@/api/roommate.js'
// 向后端获取数据
const getRoommate = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }

  // 将search对象中的每个属性作为参数添加到params中
  for (let key in search.value) {
    params[key] = search.value[key];
  }

  // 发送请求
  let result = await getRoommateListService(params)
  total.value = result.data.total
  tableData.value = result.data.records
  // 对0和1更改成否和是
  zeroOrOne(tableData.value)

}
// 调用此方法获取信息和习惯
getRoommate()

// 对0和1进行处理
const zeroOrOne = (tableData) => {
  // data为一个人的所以信息
  for (let data in tableData) {
    for (let column in tableData[data]) {
      // column为一个人中的一个信息，如number，name等
      if (tableData[data][column] === 0) {
        tableData[data][column] = "否"
      } else if (tableData[data][column] === 1) {
        tableData[data][column] = "是"
      } else if (tableData[data][column] === "0") {
        tableData[data][column] = "女"
      } else if (tableData[data][column] === "1") {
        tableData[data][column] = "男"
      } else if (tableData[data][column] === "2") {
        tableData[data][column] = "未知"
      }
    }
  }
}

// 清空搜索框数据
const clear = () => {
  for (let key in search.value) {
    search.value[key] = '';
  }
}


const exportExcelRoommateList = async () => {
  window.open("http://47.238.252.60:8080/roommate/excel")
}
</script>

<template>
  <!-- 搜索表单 -->
  <el-form :inline="true" :model="search">
    <el-form-item label="学号" style="width: 200px;">
      <el-input v-model="search.number" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="姓名" style="width: 200px;">
      <el-input v-model="search.name" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="性别" style="width: 200px;">
      <el-select v-model="search.gender" placeholder="请选择" clearable>
        <el-option label="男" value="1" />
        <el-option label="女" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="QQ" style="width: 200px;">
      <el-input v-model="search.qq" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="专业" style="width: 200px;">
      <el-input v-model="search.major" placeholder="请输入" clearable />
    </el-form-item>

    <el-form-item label="是否抽烟" style="width: 200px;">
      <el-select v-model="search.smoke" placeholder="请选择" clearable>
        <el-option label="是" value=1 />
        <el-option label="否" value=0 />
      </el-select>
    </el-form-item>
    <el-form-item label="是否喜欢热闹" style="width: 200px;">
      <el-select v-model="search.lively" placeholder="请选择" clearable>
        <el-option label="是" value=1 />
        <el-option label="否" value=0 />
      </el-select>
    </el-form-item>
    <el-form-item label="是否立志考研" style="width: 200px;">
      <el-select v-model="search.postgraduate" placeholder="请选择" clearable>
        <el-option label="是" value=1 />
        <el-option label="否" value=0 />
      </el-select>
    </el-form-item>
    <el-form-item label="是否晚睡" style="width: 200px;">
      <el-select v-model="search.sleep" placeholder="请选择" clearable>
        <el-option label="是" value=1 />
        <el-option label="否" value=0 />
      </el-select>
    </el-form-item>
    <el-form-item label="是否早起" style="width: 200px;">
      <el-select v-model="search.getUp" placeholder="请选择" clearable>
        <el-option label="是" value=1 />
        <el-option label="否" value=0 />
      </el-select>
    </el-form-item>
    <el-form-item label="备注" style="width: 200px;">
      <el-input v-model="search.remark" placeholder="请输入" clearable />
    </el-form-item>


    <el-form-item>
      <button @click.prevent="getRoommate()" class="myButton">
        <span>查询</span>
      </button>  
       &ensp;   
      <button @click.prevent="clear()" class="myButton">
        <span>重置</span>
      </button>
      &ensp;
      <button @click.prevent="exportExcelRoommateList()" class="myButton">
        <span>导出</span>
      </button>      
      &ensp;
      <button @click.prevent="$router.push('/roommateData')" class="myButton">
        <span>数据展示</span>
      </button>
    </el-form-item>
    
  </el-form>

  <!--后续根据加的搜索框会改变max-height-->
  <el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
    max-height="68vh">
    <el-table-column prop="number" align="center" label="学号" width="110" fixed></el-table-column>
    <el-table-column prop="name" align="center" label="姓名" width="180"></el-table-column>
    <el-table-column prop="gender" align="center" label="性别" width="180"></el-table-column>
    <el-table-column prop="qq" align="center" label="QQ" width="180"></el-table-column>
    <el-table-column prop="major" align="center" label="专业" width="180"></el-table-column>
    <el-table-column prop="smoke" align="center" label="是否抽烟" width="180"></el-table-column>
    <el-table-column prop="lively" align="center" label="是否喜欢热闹" width="180"></el-table-column>
    <el-table-column prop="postgraduate" align="center" label="是否立志考研" width="180"></el-table-column>
    <el-table-column prop="sleep" align="center" label="是否晚睡 " width="180">
      <template #header>
        <div>
          是否晚睡
          <el-tooltip class="box-item" effect="customized" content="23点之后为晚睡" placement="top" curor:pointer>
            <el-icon style="cursor: pointer;">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="getUp" align="center" label="是否早起" width="180">
      <template #header>
        <div>
          是否早起
          <el-tooltip class="box-item" effect="customized" content="7点之前为早起" placement="top">
            <el-icon style="cursor: pointer;">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="remark" align="center" label="备注" width="180" show-overflow-tooltip></el-table-column>

    <!--无数据显示-->
    <template #empty>
      <el-empty description="竟然没人？" />
    </template>
  </el-table>

  <!-- 分页条 -->
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15, 50]"
    layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
    @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />


</template>

<style>
/* 问号提示框颜色 */
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}

.el-form-item__content{
  margin-right: -20px;
}
.myButton {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background: #1d8bf1;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.myButton::before {
  height: 100%;
  width: 100%;
  position: absolute;
  content: "";
  background: #08e6e9;
  top: 0;
  left: 0;
  border-radius: 5px;
  clip-path: circle(27% at -3% 50%);
  transition: all 0.4s;

}

.myButton:hover::before {
  /* 在悬停时，改变clip-path的位置，让圆形完全显示 */
  clip-path: circle(50% at 50% 50%);
  /* 注意这里的百分比可能需要根据实际情况调整以达到最佳视觉效果 */
  /* 可能还需要调整过渡效果以使动画平滑 */
  transition: clip-path 0.4s;
  /* 添加或调整此行以控制动画速度 */
}

.myButton:after {
  content: " ";
  width: 0%;
  height: 100%;
  background: #08e6e9;
  position: absolute;
  transition: all 0.4s ease-in-out;
  left: 0;
}


.myButton:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

.myButton span {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 3px 3px;
  color: #fff;
  font-size: 1.125em;
  font-weight: 700;
  letter-spacing: 0.3em;
  z-index: 20;
  transition: all 0.3s ease-in-out;
}

.myButton:hover span {
  color: #1d8bf1;
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}
</style>